<!-- 用户住址 -->
<template>
  <el-form ref="form" :model="detail" :rules="rules" label-width="80px">

    <el-form-item label="所在地区" prop="address">
      <el-cascader size="large" :options="options" v-model="selectedOptions">
      </el-cascader>
    </el-form-item>

    <el-form-item label="房权证号" prop="houseCertificate">
      <el-input v-model="detail.houseCertificate" maxlength="50" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>
    
  <script>
  
  import { getUserDetail, updateUserDetailProfile } from "@/api/credit/creUser";
  
  import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

  
  export default {
    name: "",
    components: { updateUserDetailProfile, getUserDetail },
    props: {
      user: {
        type: Object
      },
      percentage: {
        type: Number
      }
    },
    data() {
      return {
        detail: [],
        options: regionData,
        selectedOptions: '',
        // userid: 0,
        // 表单校验
        rules: {
          selectedOptions: [
            { required: true, message: "地址不能为空", trigger: "blur" }
          ],
          houseCertificate: [
            { required: true, message: "房权证信息不能为空", trigger: "blur" },
            {
            pattern: /^\d{8}$/,
            message: "房权证号应为8位纯数字",
            trigger: "blur"
          }
          ]
        }
      };
    },
   
    methods: {
      submit() {
        // 编码转中文区域
        let regional_code = this.selectedOptions
        let newaddress = new Array();
        for (const i of regional_code) {
          newaddress.push(CodeToText[i])
        }
        this.detail['address'] = newaddress.join(" ")
        console.log(this.detail);
        this.$refs["form"].validate(valid => {
          if (valid) {
            updateUserDetailProfile(this.detail).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.increase()
            });
          }
        });
      },
      close() {
        this.$tab.closePage();
      },
      findUserDetail() {
        console.log(this.user.userId);
        getUserDetail(this.user.userId).then(res => {
          console.log(res);
          this.detail = res.data
          if (this.detail.address != null) {
            // 区域转码
            let oldAddress = new Array();
            let addCh = this.detail.address.split(" ");
            oldAddress.push(TextToCode[addCh[0]].code);
            oldAddress.push(TextToCode[addCh[0]][addCh[1]].code);
            if (addCh[2] != undefined) {
              oldAddress.push(TextToCode[addCh[0]][addCh[1]][addCh[2]].code);
            }
            this.selectedOptions = oldAddress
            this.percentageInitialization()
          }
  
        }).catch()
      },
      handleChange(value) {
        console.log(value);
        var name = ''
        this.selectedOptions.map(item => name += CodeToText[item] + '/')
        this.detail.address = name;//更新表单的数据，以便保存更新
        var addressStr = new Array(); //定义一数组
        addressStr = (this.detail.address).split("/"); //字符分割
        this.selectedOptions = TextToCode[addressStr[0]][addressStr[1]][addressStr[2]].code;
      },
      increase() {
        console.log(this.percentage);
        if (this.percentage > 100) {
          this.percentage = 100;
        }
        this.$emit('increase',this.percentage);
      },
      decrease() {
        this.percentage -= 10;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      },
      percentageInitialization() {
      this.percentage = 0
      if (this.user.phonenumber) {
        this.percentage += 5
      }
      if (this.user.email) {
        this.percentage += 5
      }
      if (this.user.sex != "2") {
        this.percentage += 5
      }
      if (this.detail.realName) {
        this.percentage += 5
      }
      if (this.detail.identityCard) {
        this.percentage += 5
      }
      if (this.detail.educationLevel) {
        this.percentage += 5
      }
      if (this.detail.bankCard) {
        this.percentage += 5
      }
      if (this.detail.occupation) {
        this.percentage += 5
      }
      if (this.detail.monthIncome) {
        this.percentage += 5
      }
      if (this.detail.address) {
        this.percentage += 5
      }
      if (this.detail.houseCertificate) {
        this.percentage += 5
      }
      if (this.detail.emergencyPhone) {
        this.percentage += 5
      }
      if (this.detail.password) {
        this.percentage += 5
      }
      if (this.user.userName) {
        this.percentage += 5
      }
    }
  
    },
    watch: {
      user: function (newData, oldData) {
        console.log(oldData, newData);
        this.findUserDetail()
      },
      percentage: function (newData, oldData) {
        console.log(oldData, newData);
        this.percentage = newData
      }
    }
  };
  </script>
    